<template>
  <div>
    <el-button
      @click="rules"
    >校验</el-button>
    <EditDynamicTable
      ref="EditDynamicTable"
      :data="tableData"
      keep-source
      :table-config="tableConfig2"
      :edit-config="{trigger: 'click', mode: 'cell',showStatus: true}"
    >
      <template #slot1_default="{item, props}">
        {{props.row[item.prop]}} + 5555
      </template>
    </EditDynamicTable>
    <el-pagination
      :total="600"
      :page-size="10"
      :current-page.sync="currentPage4"
    ></el-pagination>
    <CheckBox></CheckBox>
  </div>
</template>

<script>
import {TableConfig} from "@localModules/ZhiXinLib/vxeTable-components/edit-dynamic-table/TableType";
import {strCopyCount} from "@localModules/ZhiXinLib/utils";
import ShowTooltip from "@localModules/ZhiXinLib/directive/VshowTooltip/VshowTooltip";
import {ClickCopy} from "@localModules/ZhiXinLib/directive/ClickCopy";

export default {
  name: "index",
  components:{
    EditDynamicTable:()=>import('@localModules/ZhiXinLib/vxeTable-components/edit-dynamic-table/index'),
    CheckBox:()=>import('./checkBox.vue')
  },
  directives:{
    ShowTooltip,
    ClickCopy
  },
  data(){
    return {
      setOptions:[],
      currentPage4: 10,
      tableConfig2: new TableConfig({}, [
        {
          label: '序号',
          type: 'index'
        },
        {
          label: '多选择',
          type: 'checkbox'
        },
        {
          label: '选择',
          type: 'radio'
        },
        {
          label: 'dd',
          align: 'center',
          minWidth: '56',
          prop: 'genProp0',
          editRender: {
            name: 'ElInput'
          },
          editRules: [
            {
              required: true, validator: ({cellValue}) => {
                if (cellValue && cellValue.includes('6')) {
                  return new Error('错误')
                }
              }
            },
          ]
        },
        {
          label: 'dd',
          align: 'center',
          minWidth: '56',
          prop: 'genProp1',
          slotName: 'slot1'
        },
        {
          label: 'zs',
          align: 'center',
          children: [
            {
              label: 'tz',
              align: 'center',
              minWidth: '116',
              prop: 'genProp2',
              editRender: {
                name: 'ElInput'
              },
              editRules: [
                {
                  required: true, validator: ({cellValue}) => {
                    if (cellValue && cellValue.includes('7')) {
                      return new Error('错误')
                    }
                  }
                },
              ]
            },
            {
              label: 'nd',
              align: 'center',
              minWidth: '152',
              prop: 'genProp3',
              typeSlots:(h, item)=> {
                return {
                  default: (props)=>{
                    return [
                      this.$createElement('el-tag',{
                        staticClass: ['test'],
                        directives:[ // 渲染函数
                          {
                            name: 'showTooltip',
                            value: props.row[item.prop]
                          },
                          {
                            name: 'ClickCopy',
                            value: props.row[item.prop]
                          }
                        ],
                      },[props.row[item.prop]])
                    ];
                  }
                }
              },
            },
          ],
        },
        {
          label: '异步获取测试',
          prop: 'asyncTest',
          editRender:{
            name: 'ElSelect',
            setOptions:(data, params)=> {
              return this.setOptions || []
            }
          }
        },
      ]),
    }
  },
  computed:{
    tableData(){
      const data = [
      ]
      for (let i = 0; i < 10; i++) {
        data.push({
          genProp0: '66' + this.currentPage4,
          genProp1: '66' + this.currentPage4,
          genProp2: '7383.38' + this.currentPage4,
          genProp3: strCopyCount('1119.59',this.currentPage4) + this.currentPage4,
          asyncTest: 'value1'
        })
      }
      return data
    }
  },
  mounted() {
    setTimeout(()=>{
      this.setOptions=[
        {
          label: 'label1',
          value: 'value1'
        },
        {
          label: 'label2',
          value: 'value2'
        },
      ]
    },1000)
  },
  methods: {
    rules() {
      this.$refs.EditDynamicTable.validate().then(errMap=>{
        console.log(errMap)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.test{
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
